<template>
    <div class="video_ali">
        <header-footer :commonData="{$parent:$parent}">
            <div class="video video_bg" v-cloak>
                <div class="videoLeft">
                    <div v-if="isVideoOver" class="video_mask">
                    </div>
                    <a v-if="isVideoOver" class="video_mask_img" @click="reloadPage">
                        <img src="/static/img/playOver.png" width="566px" height="176px">
                    </a>
                    <player ref="player" :timeupdate='timeupdate' :ended="ended" :step='60' :playEvent='playEvent'>
                    </player>
                </div>
                <div class="videoRight">
                    <el-collapse accordion v-for="(item,index) in groups" :key="index" v-model="activeName">
                        <el-collapse-item :title="item.groupName" :name="index">
                            <div class="video_list_title" v-for="(list,index1) in item.videos" :key="index1">
                                <a class="videoList" :class="{video_list_active:list.id==ext.videoId}"
                                    href="javascript:void(0)">
                                    <div class="videoText">
                                        <p :title="list.videoName">{{list.videoName}}</p>
                                        <span>总时长：{{dateFormat(list.duration)}}</span>
                                    </div>
                                    <div class="progress">
                                        <p class="videoPercent">{{list.videoActive?'100':'0'}}%</p>
                                        <p class="videoImg">
                                            <img src="/static/img/play.gif">
                                        </p>
                                    </div>
                                </a>
                            </div>
                        </el-collapse-item>
                    </el-collapse>
                </div>
                <div class="clear"></div>
               <div style="display: flex;flex-direction: row;">
                   <div class="col" v-if="!String.isEmptyOrNUll(showercode)" style="text-align: center;">
                       <img :src="showercode" @click="$refs.smallCodeChild.showSmallCode()" title="点击放大微信扫码学习" width="100px" height="100px" style="cursor: pointer;position: relative;top: 20px;">
                       <p style="color: #FFFFFF;margin-top: 20px;">点击放大扫码小程序学习</p>
                   </div>
                   <h3 class="video_title" style="margin-top: 50px;line-height: 36px;">{{courseName}}
                   </h3>
               </div>
            </div>
        </header-footer>
        <smallCode ref="smallCodeChild"></smallCode>
    </div>
</template>

<script>
    var _this;
    import player from "@/components/player.vue"
    import headerFooter from '../../../components/cont_education/header_and_footer.vue'
    import smallCode from '../../../components/smallCode.vue'
    export default {
        name: 'video_ali',
        data: function() {
            return {
                showMovies: false,
                activeName: 0,
                videoIndex: 0,
                aliId: "",
                playauth: "",
                saveVideoData: {
                    courseId: 0,
                    rid: "",
                    applyId: 0
                },
                groups: [],
                courseName: "",
                isVideoOver: false,
                playStartTime: 0,
                ext: {},
                showercode:""
            }
        },
        beforeCreate: function() {
            _this = this;
        },
        mounted: function() {
            this.saveVideoData.courseId = this.$route.params.courseId;
            this.saveVideoData.applyId = this.$route.params.applyId;
            this.saveVideoData.groupCode = this.$route.params.groupCode;
            if (!this.common.isChrome() && !this.common.isFirefox()) {
                this.common.toPage("/broswerPage");
                return;
            }
            this.common.postNotLoading(this.api.getQRCode, {}, function(res) {
                if (!String.isEmptyOrNUll(res.resultMap)) {
                    _this.showercode = res.resultMap;
                }
            });
            // this.$refs.smallCodeChild.showSmallCodeDialog();
            this.getDetail();
        },
        methods: {
            dateFormat: function(total) {
                var hour = Math.floor(total / 60 / 60);
                var minutes = Math.floor(total / 60 % 60);
                var seconds = Math.floor(total % 60);
                hour = hour < 10 ? '0' + hour : hour;
                minutes = minutes < 10 ? '0' + minutes : minutes;
                seconds = seconds < 10 ? '0' + seconds : seconds;
                return hour + ":" + minutes + ":" + seconds;
            },
            getDetail: function() {
                this.common.post(this.api.getDetail, {
                    courseId: _this.saveVideoData.courseId,
                    groupCode: this.saveVideoData.groupCode
                }, function(res) {
                    _this.groups = res.resultMap.groups;
                    _this.playStartTime = res.ext.watchTime;
                    _this.playauth = res.ext.tagExt;
                    _this.saveVideoData.rid = res.ext.id;
                    _this.ext = res.ext;
                    var group = res.resultMap.groups;
                    for (var i = 0; i < group.length; i++) {
                        var current = group[i].videos;
                        for (var j = 0; j < current.length; j++) {
                            current[j].videoActive = true;
                            if (current[j].id == _this.ext.videoId) {
                                _this.aliId = current[j].aliId;
                                _this.courseName = current[j].videoName;
                                _this.activeName = group.indexOf(group[i], "courseId");
                                _this.$refs.player.replayByVidAndPlayAuth(_this.aliId, _this.playauth,
                                    _this.playStartTime);
                                return;
                            }
                        }
                    }
                });
            },
            timeupdate: function(time) {
                var data = {
                    vid: this.ext.videoId,
                    courseId: this.saveVideoData.courseId,
                    rid: this.saveVideoData.rid,
                    playTime: parseInt(time)
                };
                this.common.postNotLoading(this.api.saveVideoPlayRecord, data, function(res) {
                    console.log('记录时间:' + time)
                }, function() {});
            },
            ended: function(e) {
                this.common.postNotLoading(this.api.saveVideoFinish, {
                    vid: this.ext.videoId,
                    cid: this.saveVideoData.courseId,
                    rid: this.saveVideoData.rid
                }, function(res) {
                    _this.isVideoOver = true;
                    if (!res.resultMap) {
                        _this.$message.success("当前视频观看完成，请点击下一个！");
                        _this.$router.go(-1);
                    }
                });
            },
            playEvent: function() {
                console.log('开始播放')
            },
            reloadPage: function() {
                this.common.toPage(String.Format('/home/play/video_ali/{0}/{1}/{2}', this.saveVideoData.courseId,
                    this.saveVideoData
                    .applyId, this.saveVideoData.groupCode));
                window.location.reload();
            }
        },
        components: {
            headerFooter: headerFooter,
            'player': player,
            smallCode:smallCode
        }
    }
</script>

<style>

</style>
